<template>
    <div id="tmpl">
<div id="slide">
  <slide :imgs="imgs"></slide>
</div>
<div id="desc">
  <h4>{{list.title}}</h4>
  <hr>
  <ul c>
    <li style="margin-bottom: 15px"><s>市场价 ￥{{list.marketprice}}</s> &nbsp; &nbsp; &nbsp; <span style="color: red">销售价:￥{{list.sellprice}}</span></li>
    <li style="margin-bottom: 15px" class="inputli">
      购买数量:
         <inputnumber @dataObj="getCount"  class="input"></inputnumber>
      <transition  name="showball" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div v-if="isshow" id="ball"></div>
      </transition>
    </li>
    <li><mt-button size="small" type="primary">立即购买</mt-button>
      <mt-button size="small" type="danger" @click="toshopcart">加入购物车</mt-button></li>
  </ul>
</div>
      <div id="desc2">
        <h5>商品参数</h5>
        <hr>
        <ul>
          <li>商品货号:{{list.huohao}}</li>
          <li>库存情况:{{list.kucun}}</li>
          <li>上架时间:{{list.add_time}}</li>
        </ul>
      </div>
      <div id="btn">
        <router-link v-bind="{to:'/goods/goodsdesc/'+this.id}">
        <mt-button class="btn1" type="primary" size="large">商品详情</mt-button>
        </router-link>
        <router-link v-bind="{to:'/goods/goodscomment/'+this.id}">
        <mt-button type="danger" size="large">商品评论</mt-button>
        </router-link>
      </div>
    </div>
</template>

<script>
  import slide from '../subcom/slide.vue';
  import inputnumber from '../subcom/inputnumber.vue';
  import {vm} from '../../commom/common.js';
  import{setItem,valueObj} from '../../commom/localStorage'

    export default{

        components:{
          slide,inputnumber,
        },
        data(){
            return{
                isshow:false,
                inputNumber:1,
           id:0,
           list:[],
              imgs:[],

            }

        },
      mounted(){
            this.id=this.$route.params.id;
            this.getData();
            this.getImgs()
      },
      methods:{
          beforeEnter(el){
            el.style.transform='translate(0px,0px)';
          },
        enter(el,done){
              el.offsetWidth;
              el.style.transform='translate(270px,350px)'
              done()
        },
        afterEnter(el){
          this.isshow=!this.isshow;
        },
          toshopcart(){
            vm.$emit('inputCount',this.inputNumber)
       this.isshow=!this.isshow;
            valueObj.goodsid=this.id;
            valueObj.count=this.inputNumber;
            setItem(valueObj);
          },
          getCount(count){
            this.inputNumber=count;
          },
          getData(){
            this.$http.get('/api/goodsinfo',{
                params:{
                    gId:this.id
                }
            }).then(res=>{
                this.list=res.data[0];
            })
          },
        getImgs(){
          this.$http.get('/api/goodsinfoimg',{
              params:{gId:this.id}
            }
          ).then(res=>{
            this.imgs=res.data;
          })
        },

      }
    }

</script>

<style scoped>
#slide{
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  margin: 5px;
}
  #desc{
    margin: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;

  }
  #desc h4 {
    color: #0094ff;
  }
  #desc li{
    list-style: none;
  }
#desc ul{
  padding-left: 5px;
}
  #desc2{
    margin: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
  }
#desc2 li{
  list-style: none;
}
#desc2 ul{
  padding-left: 5px;
}
.btn1{
  margin-bottom: 2px;
}
.inputli{
  position: relative;
}
.input{
    position: absolute;
    left: 80px;
bottom: -20px;
  }
#ball{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff98d1;
  position: absolute;
  left: 115px;
  top:0;
transition:all 0.4s ease;
  z-index: 100;
}
</style>
